<template>
  <div class="ar-experience-container">
    <h2 class="text-2xl font-bold mb-4">AR非遗技艺体验</h2>
    <div class="ar-intro mb-8">
      <el-row :gutter="24">
        <el-col :md="14" :xs="24">
          <p class="text-lg mb-2">
            通过AR增强现实技术，您可以用手机或摄像头扫描特定图案，沉浸式体验非遗技艺的3D制作过程。科技赋能文化传承，让传统手工艺焕发新生！
          </p>
          <ul class="ar-guide">
            <li>1. 点击下方"启动AR体验"按钮</li>
            <li>2. 授权摄像头访问</li>
            <li>3. 对准剪纸等非遗图案，观看3D互动演示</li>
          </ul>
        </el-col>
        <el-col :md="10" :xs="24">
          <img src="https://img.zcool.cn/community/01b2e95e6e2e2fa8012193a3e2e1e7.jpg" class="ar-demo-img" alt="AR演示示意" />
        </el-col>
      </el-row>
    </div>
    <div class="ar-viewer-block">
      <el-button type="primary" size="large" @click="showAR = true" v-if="!showAR">启动AR体验</el-button>
      <ARViewer v-if="showAR" :model="arModel" @close="showAR = false" />
    </div>
    <!-- 调试信息：如果看到此文本，说明 ARExperience.vue 已加载 -->
    <p>ARExperience.vue 已加载。</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ARViewer from '../components/ARViewer.vue';

console.log('ARExperience.vue script setup executed!');

const showAR = ref(false);
const arModel = ref('https://example.com/ar-model.glb'); // 替换为实际3D模型地址
</script>

<style scoped>
.ar-experience-container {
  @apply p-4;
  background-color: #f8f9fa;
  max-width: 900px;
  margin: 0 auto;
}
.ar-intro {
  background: #fffbe6;
  border-radius: 8px;
  padding: 24px 20px;
  box-shadow: 0 2px 8px rgba(255, 193, 7, 0.08);
}
.ar-demo-img {
  width: 100%;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.ar-guide {
  margin-top: 12px;
  color: #b26a00;
  font-size: 1rem;
  line-height: 1.8;
  padding-left: 18px;
}
.ar-viewer-block {
  margin-top: 32px;
  text-align: center;
}
</style> 